<template>
    <div>
        <el-container style="height: 100vh;">
            <el-header style="background-color: #ffffff; height: 60px; padding: 0; border-bottom: 1px solid #e6e6e6; box-shadow: 0 1px 4px rgba(0,0,0,0.05);">
                <el-row style="display: flex; height: 60px; align-items: center; padding: 0 20px;">
                    <el-col :span="8" style="display: flex; align-items: center;">
                        <img src="../assets/xwlogo.png" alt="Logo" style="width: 40px; height: 40px; border-radius: 80%; margin-right: 5px;">
                        <p style="font-size: 16px; color: #333; margin: 0; font-weight: bold;">小窝智慧社区服务平台</p>
                    </el-col>
                    <el-col :span="16" style="text-align: right;">
                        <div style="display: flex; align-items: center; justify-content: flex-end; gap: 15px;">
                            <!-- Admin dropdown -->
                            <el-dropdown trigger="click">
                                <span class="el-dropdown-link" style="cursor: pointer; display: flex; align-items: center;">
                                    <img src="../assets/1000.png" alt="Admin" style="width: 30px; height: 30px; border-radius: 50%; margin-right: 5px;">
                                    <span style="color: #666; font-size: 14px;">{{account}}</span>
                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>个人信息</el-dropdown-item>
                                    <el-dropdown-item>退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>

                            <!-- Notification icon -->
                            <el-badge :value="3" class="notification-badge">
                                <i class="el-icon-bell" style="font-size: 20px; color: #666; cursor: pointer;"></i>
                            </el-badge>

                            <!-- Settings icon -->
                            <i class="el-icon-setting" style="font-size: 20px; color: #666; cursor: pointer;"></i>

                            <!-- Help icon -->
                            <i class="el-icon-question" style="font-size: 20px; color: #666; cursor: pointer;"></i>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="200px" style="background-color: #1e2c3c; color: #fff; overflow-y: auto;">
                    <el-menu 
                        background-color="#1e2c3c"
                        text-color="#a7b1c2"
                        active-text-color="#ffffff"
                        :default-active="'1'"
                        :collapse="false"
                        :unique-opened="true"
                        router
                        style="border-right: none;">
                        
                        <!-- 主菜单 -->
                        <el-menu-item index="/workspace" style="padding-left: 20px;">
                            <i class="el-icon-s-platform"></i>
                            <span slot="title">工作台</span>
                        </el-menu-item>
                        
                        <!-- 社区管理 -->
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-office-building"></i>
                                <span>社区管理</span>
                            </template>
                            <el-menu-item index="communityDisplay">社区管理</el-menu-item>
                            <el-menu-item index="buildingDisplay">楼栋管理</el-menu-item>
                        </el-submenu>
                        
                        <!-- 物业管理 -->
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-house"></i>
                                <span>物业管理</span>
                            </template>
                            <el-menu-item index="propertyRepairReport">报修管理</el-menu-item>
                            <el-menu-item index="3-2">住户审核</el-menu-item>
                            <el-menu-item index="/vehicle-identification">车辆出入</el-menu-item>
                            <el-menu-item index="/parking-record">停车记录</el-menu-item>
                        </el-submenu>
                        
                        <!-- 业主管理 -->
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-user"></i>
                                <span>业主管理</span>
                            </template>
                            <el-menu-item index="4-1">房屋列表</el-menu-item>
                            <el-menu-item index="4-2">房屋分配</el-menu-item>
                        </el-submenu>
                        
                        <!-- 缴费管理 -->
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-wallet"></i>
                                <span>缴费管理</span>
                            </template>
                            <el-menu-item index="5-1">缴费项目</el-menu-item>
                            <el-menu-item index="5-2">缴费记录</el-menu-item>
                        </el-submenu>
                        
                        <!-- 巡更管理 -->
                        <el-submenu index="6">
                            <template slot="title">
                                <i class="el-icon-s-tools"></i>
                                <span>巡更管理</span>
                            </template>
                            <el-menu-item index="patrolRouteDisplay">巡更路线</el-menu-item>
                            <el-menu-item index="patrolPlanDisplay">巡更计划</el-menu-item>
                            <el-menu-item index="patrolPointDisplay">巡更点位</el-menu-item>
                            <el-menu-item index="patrolCategoryDisplay">巡更分类</el-menu-item>
                            <el-menu-item index="patrolTaskDisplay">巡更任务</el-menu-item>

                        </el-submenu>
                        
                        <!-- 智慧物联 -->
                        <el-submenu index="7">
                            <template slot="title">
                                <i class="el-icon-cpu"></i>
                                <span>智慧物联</span>
                            </template>
                            <el-menu-item index="cloudPtzControl">云台监控</el-menu-item>
                            <el-menu-item index="7-2">建议列表</el-menu-item>
                        </el-submenu>
                        
                        <!-- 通知管理 -->
                        <el-submenu index="8">
                            <template slot="title">
                                <i class="el-icon-message"></i>
                                <span>通知管理</span>
                            </template>
                            <el-menu-item index="/property/propertyNotice">通知列表</el-menu-item>
                        </el-submenu>

                          <!-- 审批管理 -->
                        <el-submenu index="9">
                            <template slot="title">
                                <i class="el-icon-s-order"></i>
                                <span>审批管理</span>
                            </template>
                            <el-menu-item index="9-1">公告列表</el-menu-item>
                            <el-menu-item index="9-2">发布公告</el-menu-item>
                        </el-submenu>

                        <!-- 系统设置 -->
                        <el-submenu index="10">
                            <template slot="title">
                                <i class="el-icon-setting"></i>
                                <span>系统设置</span>
                            </template>
                            <el-menu-item index="/sys/userManagement">用户管理</el-menu-item>
                           
                            <el-menu-item index="/sys/sysLog">系统日志</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>

                <el-main class="main-content">
                    <!-- 使用路由视图代替动态组件 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'CommunityHome',
    data() {
        return {
            account: localStorage.getItem('account') || 'Admin'
        }
    },
}
</script>

<style scoped>
/* Add styles for the updated header and sidebar */
.el-header {
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  z-index: 999;
}

.el-aside {
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.notification-badge >>> .el-badge__content {
  background-color: #ff4949;
}

/* Main content styles */
.main-content {
  background-color: #f5f7fa;
  padding: 20px;
  height: calc(100vh - 60px);
  overflow-y: auto;
}
</style>